<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>信息编辑</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/picker.css"/>
<link rel="stylesheet" type="text/css" href="css/user.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/picker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div id="wrapper">
	
	<button class="addDemand" type="button" v-if="demandArr.length > 0" @click="increase"></button>
	
	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">信息编辑</h4>
	</header>
	
	<nav class="flex-row bg-w tc bottom-line" id="infoNav">
		<a class="flex-full" @click="infoNav(0)">基本信息</a>
		<a class="flex-full" @click="infoNav(1)">客户需求</a>
	</nav>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children">
					
					<!--基本信息-->
					<template v-if='showType == 0'>
						
						<div class="dm-norlist top-line bottom-line dm-mt bg-w">
							<ul class="flex-row bottom-line input">
								<li class="name">姓名</li>
								<li class="cot flex-full">
									<input class="max-input tr" maxlength="8" type="text" name="userName" value="王多鱼" placeholder="请输入姓名" />
								</li>
							</ul>
							<ul class="flex-row bottom-line list">
								<li class="name">来源</li>
								<li class="cot tr section flex-full">扫码关注</li>
							</ul>
							<ul class="flex-row list arrow" @click="selSex($event)">
								<li class="name">性别</li>
								<li class="cot tr flex-full">男</li>
							</ul>
						</div>
						
						<div class="dm-title dm-clearfix">手机号<button @click="addPhone" class="dm-right btn" type="button">+ 添加</button></div>
						<div class="dm-norlist bg-w top-line bottom-line">
							<template v-for="(item,index) in phone">
								<ul class="flex-row bottom-line input" v-if="index == 0">
									<li class="cot flex-full">
										<input class="max-input section tl" maxlength="11" type="text" name="phone" :value="item.tel" readonly="readonly" />
									</li>
									<li class="name h5">
										<label class="flex-row">
											<input type="radio" class="radio" name="defaultPhone" v-model="defaultPhone" :value="item.tel" />默认
										</label>
									</li>
								</ul>
								<ul class="flex-row bottom-line input" v-else>
									<li class="cot flex-full" @click="addPhone(index)">
										<input class="max-input tl" maxlength="11" type="text" name="phone" :value="item.tel" readonly="readonly" />
									</li>
									<li class="name h5 right-line">
										<label class="flex-row">
											<input type="radio" class="radio" name="defaultPhone" :value="item.tel" v-model="defaultPhone" readonly="readonly" />默认
										</label>
									</li>
									<button class="del-phone red h5" @click="delPhone(item.tel)" type="button">删除</button>
								</ul>
							</template>
						</div>
						
						<div class="dm-title dm-clearfix">地址<button @click="addAddr" class="dm-right btn" type="button">+ 添加</button></div>
						<div class="dm-norlist bg-w top-line bottom-line">
							<ul class="flex-row bottom-line input text" v-for="(item,index) in address">
								<li class="cot flex-full" @click="addAddr(index)">
									<textarea name="address" placeholder="请输入地址" readonly="readonly">{{item.village+item.build+item.unit+item.door+item.road+item.lane}}</textarea>
								</li>
								<button class="del-phone red h5" @click="delAddr(index)" type="button">删除</button>
							</ul>
						</div>
						
						<div class="dm-title">备注信息</div>
						<div class="dm-norlist bg-w top-line bottom-line">
							<ul class="flex-row bottom-line input text">
								<li class="cot flex-full">
									<textarea name="address" placeholder="请输入备注信息" rows="3"></textarea>
								</li>
							</ul>
						</div>
						
						<button class="submitBtn" type="button">保存</button>
						
					</template>
					
					<!--客户需求-->
					<template v-else>
						<!--多个时-->
						<div class="demandMod" v-for="(item,index) in demandArr" v-if="demandArr.length > 0">
							<div class="dm-norlist bg-w dm-mt dm-mb bg-w top-line bottom-line">
								<ul class="list bottom-line flex-row flex-top arrow" @click="openAddr(index)">
									<li class="name">小区地址</li>
									<li class="cot flex-full tr">{{item.addr == null ? '请选择' : item.addr}}</li>
								</ul>
								<ul class="list flex-row bottom-line flex-top proDirect">
									<li class="name">产品意向</li>
									<li class="cot flex-full dm-clearfix">
										<label class="flex-row h6 dm-left"><input type="radio" v-model="item.direct" :name="'direct-'+(index+1)" value="0" :disabled="!item.open" />法兰菲衣柜</label>
										<label class="flex-row h6 dm-left"><input type="radio" v-model="item.direct" :name="'direct-'+(index+1)" value="1" :disabled="!item.open" />志邦厨柜</label>
										<label class="flex-row h6 dm-left"><input type="radio" v-model="item.direct" :name="'direct-'+(index+1)" value="2" :disabled="!item.open" />志邦木门</label>
									</li>
								</ul>
								<ul class="list bottom-line flex-row arrow" @click="selImt(index)">
									<li class="name">是否重点跟踪</li>
									<li class="cot flex-full tr">{{item.important}}</li>
								</ul>
								<template v-if="item.open">
								<ul class="input bottom-line flex-row">
									<li class="name">房屋类型</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="item.homeType" placeholder="请输入" />
									</li>
								</ul>
								<ul class="list bottom-line flex-row arrow" @click="selDecorateType(index)">
									<li class="name">装修类型</li>
									<li class="cot flex-full tr">{{item.decorateType == null ?  '请选择' : item.decorateType}}</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">装修风格</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="item.decorateStyle" placeholder="请输入" />
									</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">房屋面积（m²）</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="item.prop" placeholder="请输入" />
									</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">客户预算（元）</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="item.val" placeholder="请输入" />
									</li>
								</ul>
								</template>
								<ul class="input bottom-line flex-row" v-if="!item.open">
									<li class="cot tr flex-full">
										<button class="btn-1" type="button" @click="delDemand(index)">删除</button>
										<button class="btn-2" type="button" @click="editDemand(index)">编辑</button>
									</li>
								</ul>
							</div>
							<template v-if="item.open">
								<button class="submitBtn" type="button" @click="saveDemand(index)">保存</button>
							</template>
						</div>
						
						
						<!--空数值时-->
						<div class="demandMod" v-if="demandArr.length == 0">
							<div class="dm-norlist bg-w dm-mt bg-w top-line bottom-line">
								<ul class="list bottom-line flex-row flex-top arrow" @click="openAddr">
									<li class="name">小区地址</li>
									<li class="cot flex-full tr">{{demand.addr == null ? '请选择' : demand.addr}}</li>
								</ul>
								<ul class="list flex-row bottom-line flex-top proDirect">
									<li class="name">产品意向</li>
									<li class="cot flex-full dm-clearfix">
										<label class="flex-row h6 dm-left"><input type="radio" v-model="demand.direct" name='direct-0' value="0" />法兰菲衣柜</label>
										<label class="flex-row h6 dm-left"><input type="radio" v-model="demand.direct" name='direct-0' value="1" />志邦厨柜</label>
										<label class="flex-row h6 dm-left"><input type="radio" v-model="demand.direct" name='direct-0' value="2" />志邦木门</label>
									</li>
								</ul>
								<ul class="list bottom-line flex-row arrow" @click="selImt">
									<li class="name">是否重点跟踪</li>
									<li class="cot flex-full tr">{{demand.important}}</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">房屋类型</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="demand.homeType" placeholder="请输入" />
									</li>
								</ul>
								<ul class="list bottom-line flex-row arrow" @click="selDecorateType">
									<li class="name">装修类型</li>
									<li class="cot flex-full tr">{{demand.decorateType == null ? '请选择' : demand.decorateType}}</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">装修风格</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="demand.decorateStyle" placeholder="请输入" />
									</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">房屋面积（m²）</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="demand.prop" placeholder="请输入" />
									</li>
								</ul>
								<ul class="input bottom-line flex-row">
									<li class="name">客户预算（元）</li>
									<li class="cot flex-full">
										<input type="text" class="max-input tr" v-model="demand.val" placeholder="请输入" />
									</li>
								</ul>
							</div>
							<button class="submitBtn" type="button" @click="saveDemand">保存</button>
						</div>
						
					</template>
					
				</div>
				
			</div>
		</div>
	</div>
	
	<!--新增地址-->
	<div class="subMain animate" id="addressMask">
		
		<header class="header">
			<a class="left_icon back_btn" data-type='1'></a>
			<h4 class="title">新增地址</h4>
		</header>
		
		<div class="swiper-container Main" id="addressMod">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					
					<div class="children">
						
						<div class="dm-norlist bg-w top-line bottom-line dm-mt">
							<ul class="input bottom-line flex-row">
								<li class="name">小区</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.village" placeholder="请输入小区名称" />
								</li>
							</ul>
						</div>
						<div class="dm-norlist bg-w top-line bottom-line dm-mt">
							<ul class="input bottom-line flex-row">
								<li class="name">楼栋</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.build" placeholder="请输入所在楼栋" />
								</li>
							</ul>
							<ul class="input bottom-line flex-row">
								<li class="name">单元</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.unit" placeholder="请输入所在单元" />
								</li>
							</ul>
							<ul class="input bottom-line flex-row">
								<li class="name">门牌</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.door" placeholder="请输入门牌号" />
								</li>
							</ul>
						</div>
						<div class="dm-norlist bg-w top-line bottom-line dm-mt">
							<ul class="input bottom-line flex-row">
								<li class="name">路</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.road" placeholder="请输入所在路段" />
								</li>
							</ul>
							<ul class="input bottom-line flex-row">
								<li class="name">弄</li>
								<li class="cot flex-full">
									<input class="max-input tr" type="text" v-model="addAddress.lane" placeholder="请输入所在弄" />
								</li>
							</ul>
						</div>
						
						<button class="submitBtn" type="button" @click="enterAddr">保存</button>
						
					</div>
					
				</div>
			</div>
		</div>
		
	</div>
	
	<!--选择小区地址-->
	<div class="subMain animate" id="selAddrMask">
		<header class="header">
			<a class="left_icon back_btn" data-type='1'></a>
			<h4 class="title">选择地址</h4>
		</header>
		<div class="swiper-container Main" id="selAddrMod">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					
					<div class="children">
						
						<div class="dm-norlist bg-w dm-mt dm-mb top-line bottom-line">
							<ul class="list bottom-line flex-row" v-for="(item,index) in address">
								<li class="cot flex-full tl">
									<label :for="'addr_'+index">{{item.village+item.build+item.unit+item.door+item.road+item.lane}}</label></li>
								<li class="name">
									<input type="radio" name='seladdr' @change="changeAddr(index)" v-model="checkAddr" :id="'addr_'+index" :value="index" />
								</li>
							</ul>
						</div>
						
					</div>
					
				</div>
			</div>
		</div>
	</div>
	
</div>

<script src="js/user_editInfo.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
